<template>
  <div class="uni-user-popover" :style="{left:(left)+'px', top:(top-48)+'px', textAlign: textAlign}">
      <div class="uni-text uni-flex" v-for="item in list">
        <el-tooltip effect="dark" v-if="item.label && item.label.length > 4" :content="item.label" placement="top">
          <div class="uni-label uni-ellipsis" style="width: 60px;"> {{item.label}}</div>
        </el-tooltip>
        <div class="uni-label" v-else>{{item.label}}：</div>

        <el-tooltip effect="dark" :content="item.value" placement="top" v-if="item.value && item.value.length > 8">
          <div class="uni-ellipsis" style="width: 90px;"> {{item.value}}</div>
        </el-tooltip>
        <div v-else> {{item.value}}</div>
      </div>
    <div class="uni-history" v-if="showHistory" @click="historyClick">查看历史轨迹</div>
    <img src="../../../../assets/img/dir.png" class="popup-tip uni-center-x" />
  </div>
</template>

<script>
  export default {
    name: 'UserPopover',
    props: {
      showHistory: {
      	type: Boolean,
      	default () {
      		return true
      	}
      },
      textAlign: {
      	type: String,
      	default () {
      		return 'left'
      	}
      }
    },
    components: {
    },
    data() {
      return {
        list: [],
        user: null,
        top: -100,
        left: -100
      }
    },
    methods: {
      setList(list){
        this.list = list || []
      },
      setUser(user) {
        this.user = user
        this.list = [{
           label: '姓名',
           value: user.name
        },{
           label: '类型',
           value: this.$dictUtils.getDictLabel("lora_user_type", user.userType, '-')
        }]
        if(user.userType === '1' && user.depart) {
          this.list.push({
            label: '部门',
            value: user.depart.name || ''
          })
        }
        if(user.userType === '2' || user.userType === '4') {
          this.list.push({
            label: '来访单位',
            value: user.companyName || ''
          })
          this.list.push({
            label: '联系方式',
            value: user.phone || ''
          })
          if(user.receiverName) {
            this.list.push({
              label: '接待人',
              value: user.receiverName+"("+user.receiverCode+")"
            })
          } else {
            this.list.push({
              label: '接待人',
              value: ""
            })
          }
          if(user.plateNo && user.plateNo != '') {
            this.list.push({
              label: '车牌号：',
              value: user.plateNo
            })
          }
        }
      },
      setPosition(x, y){
        this.top = y
        this.left = x
      },
      historyClick(){
        this.$emit("onHistory", this.user)
      }
    }
  }
</script>
<style scoped>
  .uni-user-popover {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(123, 123, 123, 0.5);
    padding: 15px 10px 10px;
    pointer-events: auto;
    position: absolute;
    z-index: 99;
    /* width: 170px; */

    transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
  /*  text-align: center; */
  }
  .popup-tip {
    position: absolute;
    width: 23px;
    height: 16px;
    /* left: 65px; */
    bottom: -15px;
  }
  .uni-text {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 5px;
    /* width: 150px; */
  }
  .uni-label {
    font-weight: bold;
  }
  .uni-history {
    color: #096DD9;
    font-size: 12px;
    float: right;
    line-height: 18px;
  }
</style>
